<template>
    <!-- 引入container布局 -->
    <el-container class="home-container">
        <!-- 头部 -->
        <el-header>
            <div>
                <img src="../assets/font/pic.jpg" alt="" />
                <span>个人运动平台</span>
            </div>
            <el-button type="info" @click="logout">退出</el-button>
        </el-header>
        <!-- 主体 -->
        <el-container>
            <!-- 侧边栏 -->
            <el-aside :width="isCollapse ? '64px' : '200px'">
                <div class="toggle-button" @click="toggle">|||</div>
                <el-menu background-color="#333744" text-color="#fff" active-text-color="#409eff" unique-opened
                    :collapse="isCollapse" :collapse-transition=false :router="true" :default-active="activePath">
                    <!-- 一级菜单 -->
                    <!-- 动态绑定 item.id+'' 数字+空字符串转型成string -->
                    <el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">

                        <template slot="title">
                            <i :class="iconsObject[item.id]" alt=""></i>
                            <span>{{ item.title }}</span>
                        </template>
                        <!-- 二级菜单 -->
                        
                        <el-menu-item :index="it.path + ''" v-for="it in item.sList" :key="it.id" ><!-- @click="saveNaxState(it.path)" -->
                            <template slot="title">
                                <i :class="iconsObject[it.id]" alt=""></i>
                                <span>{{ it.title }}</span>
                            </template>
                        </el-menu-item>

                    </el-submenu>

                </el-menu>
            </el-aside>
            <!-- 主体内容 -->
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
    data () {
        return {
            // 菜单列表
            menuList: [],
            isCollapse: false,// 判断伸缩
            iconsObject: {
                '100': 'iconfont icon-guanliyuan',
                '200': 'iconfont icon-paobu',
                '101': 'iconfont icon-denglu',
                '102': 'iconfont icon-mima',
                '103': 'iconfont icon-paobu',
                '104': 'iconfont icon-shangpin',
                '201': 'iconfont icon-shu',
                '202': 'iconfont icon-reliang',
                '203': 'iconfont icon-shiwu',
                '204': 'iconfont icon-denglu',
            },
            activePath:'', //默认空路径
        }
    },

    // 类似onload 生命周期函数
    created () {
        // 查询menuList
        this.getMenuList()
        this.activePath = window.sessionStorage.getItem("activePath") // 取出session中保存的path 并动态修改activePath
    },

    methods: {
        logout () {
            //退出
            //先清除token再回到首页 否则会有报错(不过好像不影响功能)
            this.$router.push("/Login");
            window.sessionStorage.clear();// 清除session并回到首页
        },

        // 获取导航菜单
        async getMenuList () {
            const { data: res } = await this.$http.get("menus");
            if (res.flag != 202) return this.$message.error("获取列表失败!"); // 访问失败错误提示
            this.menuList = res.menus;// 访问成功数据回填
        },

        // 控制伸缩
        toggle () {
            this.isCollapse = !this.isCollapse;
        },
        // 保存路径
        saveNaxState(activePath) {
            window.sessionStorage.setItem("activePath" ,activePath)// 存放路径到session中
            this.activePath = activePath;
        }
    },
    watch:{
        // 监控路由 发生变化时改变activePath并保存路径到session中
        $route: function(activePath){
            this.saveNaxState(activePath.path);
        }
    }
}
</script>

<style lang="less" scoped>
// 布局样式
.home-container {
    height: 100%;
}

// 头部样式
.el-header {
    background-color: #373d41;
    display: flex;
    justify-content: space-between; //左右贴边
    padding-left: 0; //左边界
    color: white;
    font-size: 20px;
    align-items: center; 

    div {
        display: flex;
        align-items: center;
    }

    span {
        margin-left: 15px;
    }
}

// 侧边样式
.el-aside {
    background-color: #333744;

    .el-menu {
        border-right: none;
    }
}

// 主体样式
.el-main {
    background-color: #eaedf1;
}

//头像样式
img {
    width: 55px;
    height: 55px;
}

// 伸缩按钮样式
.toggle-button {
    background-color: #4A5064;
    font-size: 10px;
    line-height: 24px;
    color: #fff;
    text-align: center;
    letter-spacing: 0px;
    cursor: pointer;
}

//导航栏中图标和文字的间距
.el-menu i {
    padding-right: 10px;
}
</style>